<template>
    <div class="ledger-box">
        <!-- 客户账款汇总 -->
        <serchForm :Form="clientForm" :FormLabel="clientFormLabel" @onSearch="onSearch" />
        <div class="function-box">
            <!-- <el-button class="visitBtn" @click="visitLogs"><i class="iconfont icon-daochu"/>导出</el-button> -->
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="total" :page="page" :limit="limit"
            :pageSize="pageSize" @handleSelectionChange="handleSelectionChange"
            @handleChange="handleChange" @updatePage="updatePage" @updateLimit="updateLimit"
            :tableHeaderData="clientTableHeaderData" @handleEdit="handleEdit" @handleDelete="handleDelete"
            :tableData="clientTableData" :operate="operate" />
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { ref } from 'vue';
const idActive = 'customerId'
// 显示操作栏
const operate = ref(false)
// 表单绑定属性名
let clientForm = ref(
    {
        customerId: '',         // 客户编号
        customerName: '',       // 客户名称
        customerType: '',       // 客户类型
        responsiblePerson: '',  // 负责人
    }
)
// 表单数据标题
let clientFormLabel = ref([
    {
        name: 'customerId',
        label: '客户编号'
    },
    {
        name: 'customerName',
        label: '客户名称',
    },
    {
        name: 'customerType',
        label: '客户类型',
    },
    {
        name: 'responsiblePerson',
        label: '负责人'
    },
])
// 查找
const onSearch = (v) => {
    console.log(v);
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 每页显示条目个数
const pageSize = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let page = ref(1)
// 条数
let limit = ref(20)
// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let clientTableHeaderData = ref([
    {
        prop: 'customerId',
        label: '客户编号',
        colorClassName: 'activeColor',
        minwidth: '110px'
    },
    {
        prop: 'customerName',
        label: '客户名称',
        colorClassName: 'activeColor',
        minwidth: '110px'
    },
    {
        prop: 'customerType',
        label: '客户类型',
        colorClassName: 'activeColor',
        minwidth: '100px'
    },
   
    {
        prop: 'customerContact',
        label: '客户联系人',
        minwidth: '110px'
    },
    {
        prop: 'contactPhone',
        label: '联系电话',
        minwidth: '120px'
    },
    {
        prop: 'responsiblePerson',
        label: '负责人',
        minwidth: '100px'
    },
    {
        prop: 'responsiblePersonPhone',
        label: '负责人电话',
        minwidth: '120px'
    },
    {
        prop: 'contractId',
        label: '合同编号',
        minwidth: '100px'
    },
    {
        prop: 'contractDate',
        label: '合同日期',
        minwidth: '100px'
    },
    {
        prop: 'contractAmount',
        label: '合同金额',
        minwidth: '100px'
    },
    {
        prop: 'amountReceived',
        label: '已收金额',
        minwidth: '100px'
    },
    {
        prop: 'remainingAmount',
        label: '剩余金额',
        minwidth: '100px'
    },
    {
        prop: 'remarks',
        label: '备注',
    },
])
// 表格数据内容
let clientTableData = ref([

])

// 删除客户
const deleteCustomer = () => {
    console.log('删除客户');
}
// 拜访记录
const visitLogs = () => {
    console.log('拜访记录');
}

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    console.log(v);
    limit.value = v.page.limit
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}
// 编辑
const handleEdit = (props) => {
    let { i, v } = props
    console.log('编辑', i, v);
}
// 删除
const handleDelete = (props) => {
    let { i, v } = props
    console.log('删除', i, v);
}
</script>
<style scoped lang='scss'>
.ledger-box {
    padding: 16px;

    .function-box {
        display: flex;
        align-items: center;

        .create,
        .delete,
        .visit {
            span {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .iconfont {
                    margin-right: 5px;
                }
            }

        }

        .create {
            color: #fff;
            background-color: #FC8E25;
        }

        .delete {
            color: #fff;
            background-color: #F65228;
        }

        .visit {
            color: #fff;
            background-color: #7A68F0;
        }

        .export {
            color: #fff;
            background-color: #EC1216;

            span {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .iconfont {
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>
